<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="description" content=""/>
    <meta name="author" content="Simplicity Itself"/>

    <title>Yummy Noodle Bar</title>

    <link href="/resources/css/bootstrap.min.css" rel="stylesheet">
    </link>
    <style type="text/css">
        body {
            padding-top: 60px;
            padding-bottom: 40px;
        }

        .sidebar-nav {
            padding: 9px 0;
        }
    </style>
    <!-- See http://twitter.github.com/bootstrap/scaffolding.html#responsive -->
    <link href="/resources/css/bootstrap-responsive.min.css" rel="stylesheet">
    </link>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>

<div th:include="layout :: head"></div>
<div class="container-fluid">
    <div class="hero-unit">
        <h3>Your order is confirmed</h3>

        <p>
            <a class="btn btn-primary btn-large" href="/">Please can I have some more</a>
            <a class="btn btn-primary btn-large"
               th:href="'/order/' + ${orderStatus.orderId}">Get latest status</a>
        </p>

    </div>

    <div class="row-fluid sidebar-nav">
        <div class="span8">
            <p class="text-info"><span th:text="${orderStatus.name}">, </span>Thanks for your order</p>

            <p class="text-info">Your order number is <span th:text="${orderStatus.orderId}"></span></p>

            <p class="text-info">The estimate for cooking is 20 minutes</p>

            <p class="text-success">The status is currently <span th:text="${orderStatus.status}"></span></p>

        </div>
    </div>
    <div th:include="layout :: foot"></div>
</div>

</body>
</html>
